<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>


    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        .head {
            width: 100%;
            line-height: 100px;
        }
        .head #img {
            float: left;
            width: 70px;
            height: 70px;
            padding: 0 40px;
            margin: 20px 0px;
            border-right: 2px solid black;
        }
        .head img {
            width: 100%;
            height: 100%;
        }
        .head p {
            float: left;
            height: 70px;
            padding: 0px 20px;
            font-size: 25px;
            color: #01b6eb;
        }

        .mid-body {
            width: 100%;
            margin: 20px 0px;

        }
        .mid-body .info {
            margin: 10px 30px;
            border-top: 2px solid #27d0d8;
            border-left: 1px solid #f1f1f1;
            border-right: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .mid-body .info #okAddress {
            color: #757874;
            font-size: 17px;
            padding: 10px 28px;
        }
        .mid-body .info #address {
            width: 100%;
            padding: 0px 0px 20px 10px;
        }
        .mid-body .info #address p {
            padding: 0px 50px;
            font-size: 18px;
            color: black;
        }
        .mid-body .info #address li {
            padding: 0px 60px;
            font-size: 18px;
            color: #757874;
        }

        .mid-body .pay {
            margin: 50px 30px;
            border-top: 2px solid #27d0d8;
            border-left: 1px solid #f1f1f1;
            border-right: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .mid-body .pay #payWay {
            color: #757874;
            font-size: 17px;
            padding: 10px 28px;
        }
        .mid-body .pay #payStyle {
            width: 100%;
            padding: 0px 0px 20px 10px;
        }
        .mid-body .pay #payStyle p {
            padding: 0px 50px;
            font-size: 18px;
            color: black;
        }

        .mid-body .pay #payStyle li {
            padding: 15px 60px;
            margin: 10px 10px;
            width: 50px;
            height: 50px;
            font-size: 18px;
            color: #757874;
        }
        .mid-body .pay #payStyle li img {
            margin-top: -55px;
            margin-left: 15px;
            width: 100%;
            height: 100%;
        }

        .bottom-body {
            margin: 25px 0px 50px 0px;
            width: 100%;
        }
        .bottom-body .bookList {
            margin:10px 30px;
            border-top: 2px solid #27d0d8;
            border-left: 1px solid #f1f1f1;
            border-right: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            background-color: #f7f7f7;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .bookList #bookTable {
            border: none;
        }
        .bottom-body .bookList .thead {
            width: 100%;
            height: 80px;
            border: none;
        }
        .bookList .thead tr td{
            width: 170.5px;
            height: 80px;
            line-height: 80px;
            border: none;
            border-bottom: 1px solid #cddcd2;
            text-align: center;
            word-spacing: 10px;
            font-size: 20px;
            font-weight: 500;
        }
        .infoBody {
            height: 680px;
            overflow-y: auto;
        }

        .infoBody tr  {
            height: 140px;
            border: none;
            text-align: center;
        }
        .infoBody tr td {
            width: 170.5px;
            height: 140px;
            color: #5f625f;
            font-size: 18px;
            border: none;
        }
        .infoBody .status {
            color: green;
        }
        .deleteById:hover {
            filter: brightness(1.5);
        }

    </style>
</head>
<body>
<!--    头部开始了-->
    <div class="head clearfix">
        <div id="img">
            <img src="images/favicon.png" alt="">
        </div>
        <p>我的订单</p>
    </div>
<!--    头部结束了-->

<!--    info开始了-->
    <div class="mid-body">
        <div class="info">
            <div id="okAddress">
                确认收货地址
            </div>
            <div id="address">
                <p>寄送到:</p>
                <li>江西省 新余市 高新区阳光大道2666号(zxb 收) 187****6538</li>
            </div>
        </div>
        <div class="pay">
            <div id="payWay">
                支付方式
            </div>
            <div id="payStyle">
                <p>支付方式:</p>
                <li>
                    <img src="images/微信支付.png" alt="">
                </li>
            </div>
        </div>

        <div class="bottom-body">
            <div class="bookList">
                <table cellspacing="0" border="1" class="thead">
                    <thead class="thead">
                    <tr>
                        <td> 订 单 编 号 </td>
                        <td> 图      片</td>
                        <td> 书      名</td>
                        <td> 数      量</td>
                        <td> 单      价</td>
                        <td> 总      价</td>
                        <td> 状      态 </td>
                        <td> 操      作</td>
                    </tr>
                    </thead>
                </table>
                <div class="infoBody">
                    <table  border="1" cellspacing="0" id="bookTable">
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
<!--    info结束了-->
</body>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    let numbers = [];
    function generateRandomNineDigitNumber() {
        let randomNumber = Math.floor(Math.random() * 900000000) + 100000000;
        while (numbers.includes(randomNumber)) {
            randomNumber = Math.floor(Math.random() * 900000000) + 100000000;
        }
        numbers.push(randomNumber);
        return randomNumber;
    }

    const myOrder = JSON.parse(sessionStorage.getItem("myOrder"));
    if (myOrder!=null) {
        const items = myOrder.items;
        let tableData = ""
        for (let key in items) {
            if (items.hasOwnProperty(key)) {
                tableData += "<tr>\n" +
                    "            <td>"+ generateRandomNineDigitNumber() +"</td>\n"+
                    "            <td><img src=\"images/bookImg.png\" alt=\"\" style=\"width: 70px; height: 70px\"></td>\n" +
                    "            <td class=\"bookName\">" + items[key].name + "</td>\n" +
                    "            <td>\n" +
                    "              <span class=\"bookCnt\">" + items[key].bookCnt + "</span>\n" +
                    "            </td>\n" +
                    "            <td class=\"unitPrice\">" + items[key].book_UnitPrice + "</td>\n" +
                    "            <td class=\"allPrice\">" + items[key].book_allPrice + "</td>\n" +
                    "            <td class=\"status\">"+ " 商家未发货 " +"</td>                                                              "+
                    "            <td id=\"drop\"><a href=\"#\" class=\"deleteById\">\n" +
                    "              <img src=\"images/delete.png\" alt=\"删除\" title=\" 删  除 \" width=\"30px\" height=\"30px\">  </a></td>\n" +
                    "          </tr>\n"
            }
        }
        document.getElementById("bookTable").innerHTML = tableData;


        var deleteById = document.getElementsByClassName("deleteById");
        var i = 0;
        for (let key in items) {
            if (items.hasOwnProperty(key)) {
                deleteById[i].addEventListener('click', function () {
                    this.setAttribute("bookId", key)
                })
                deleteById[i].addEventListener('click', function () {
                    this.setAttribute("bookName", items[key].name)
                })
            }
            i++;
        }



        // 对用户点击删除购物车数据做出处理
        var deleteById = document.getElementsByClassName('deleteById');
        for (var i = 0; i < deleteById.length; i++) {
            deleteById[i].addEventListener('click', function () {
                var bookId = this.getAttribute("bookId");
                var bookName = this.getAttribute("bookName")

                if (confirm("亲，请再次确认是否要删除《" + bookName + "》订单！")) {
                    axios({
                        url: "/deleteCartData",
                        method: 'post',
                        data: {
                            "cart": myOrder,
                            "bookId": bookId
                        }
                    }).then(resp => {
                        sessionStorage.setItem("myOrder", JSON.stringify(resp.data));

                        sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))
                        //不得不用该方法，不然没法刷新
                        location.href = "/OrderDetail.html";
                    })
                }
            });
        }
    }


</script>
</html>